<template>
  <view class="home-container">
    <image class="logo" src="/static/logo.png"></image>
    <view class="game-title">童年弹射-弹珠擂台</view>
    
    <!-- 新手引导遮罩 -->
    <view v-if="showGuide" class="guide-mask">
      <view class="guide-content">
        <view class="guide-title">新手引导</view>
        <view class="guide-text">
          {{guideSteps[currentStep].text}}
        </view>
        <button class="guide-btn" @click="nextGuideStep">
          {{currentStep === guideSteps.length-1 ? '开始游戏' : '下一步'}}
        </button>
      </view>
    </view>
    
    <view class="mode-select">
      <button class="mode-btn" @click="startGame('single')">单人游戏</button>
      <button class="mode-btn" @click="startGame('multi')">多人游戏</button>
    </view>

    <view class="settings-section">
      <button class="settings-btn" @click="openSettings">游戏设置</button>
      <button class="rules-btn" @click="showRules">游戏规则</button>
    </view>

    <view class="stats-section">
      <view class="stat-item">
        <text>我的弹珠: {{marbleCount}}</text>
      </view>
      <view class="stat-item">
        <text>当前积分: {{score}}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      marbleCount: 5,
      score: 0,
      showGuide: true,
      currentStep: 0,
      guideSteps: [
        {
          text: '欢迎来到童年弹射！\n拖动弹珠撞击其他弹珠，将它们打入终点洞穴即可赢得比赛'
        },
        {
          text: '选择游戏模式：\n单人模式-练习技巧\n多人模式-与好友对战'
        },
        {
          text: '赢得弹珠可获得积分\n积分可兑换新弹珠和皮肤'
        }
      ]
    }
  },
  onLoad() {
    const hasShownGuide = uni.getStorageSync('hasShownGuide')
    if (hasShownGuide) {
      this.showGuide = false
    }
  },
  methods: {
    nextGuideStep() {
      if (this.currentStep < this.guideSteps.length - 1) {
        this.currentStep++
      } else {
        this.showGuide = false
        uni.setStorageSync('hasShownGuide', true)
      }
    },
    startGame(mode) {
      if (this.showGuide) return
      if (mode === 'single') {
        uni.navigateTo({
          url: '/pages/game/single-player'
        });
      } else {
        uni.navigateTo({
          url: '/pages/game/multi-player'
        });
      }
    },
    openSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      });
    },
    showRules() {
      uni.navigateTo({
        url: '/pages/rules/index'
      });
    }
  }
}
</script>

<style>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  padding-bottom: 80rpx;
  height: 100vh;
  background: #e0e5ec;
  box-sizing: border-box;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  filter: drop-shadow(8rpx 8rpx 15rpx rgba(163,177,198,0.6)) 
          drop-shadow(-8rpx -8rpx 15rpx rgba(255,255,255,0.5));
}

.game-title {
  font-size: 48rpx;
  color: #4a5568;
  font-weight: bold;
  margin-bottom: 60rpx;
  text-shadow: 2rpx 2rpx 4rpx rgba(163,177,198,0.6),
               -2rpx -2rpx 4rpx rgba(255,255,255,0.5);
}

.mode-select {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 60rpx;
}

.mode-btn {
  background: #e0e5ec;
  color: #4a5568;
  margin: 20rpx 0;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
  border: none;
  transition: all 0.2s ease;
}
.mode-btn:active {
  box-shadow: inset 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              inset -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.settings-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 40rpx;
}

.settings-btn, .rules-btn {
  background: #e0e5ec;
  color: #4a5568;
  width: 48%;
  border-radius: 50rpx;
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
  border: none;
  transition: all 0.2s ease;
}
.settings-btn:active, .rules-btn:active {
  box-shadow: inset 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              inset -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.stats-section {
  width: 100%;
  background: #e0e5ec;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-top: auto;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.stat-item {
  color: #4a5568;
  font-size: 28rpx;
  margin: 10rpx 0;
}

/* 新手引导样式 */
.guide-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.guide-content {
  width: 80%;
  background: #e0e5ec;
  border-radius: 30rpx;
  padding: 40rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}

.guide-title {
  font-size: 36rpx;
  color: #4a5568;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.guide-text {
  font-size: 30rpx;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 40rpx;
  white-space: pre-line;
  text-align: center;
}

.guide-btn {
  background: #e0e5ec;
  color: #4a5568;
  border-radius: 50rpx;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  box-shadow: 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
  border: none;
}
.guide-btn:active {
  box-shadow: inset 8rpx 8rpx 15rpx rgba(163,177,198,0.6),
              inset -8rpx -8rpx 15rpx rgba(255,255,255,0.5);
}
</style>
